<template>
  <div :class="styles.cart"
       @mouseenter="showCartDetail=true"
       @mouseleave="showCartDetail=false">
    <div :class="styles['cart-info']" :style="showHoverBorder">
      <img src="@/assets/cart.svg">
      <span>我的购物车</span>
    </div>
    <div :class="styles['cart-detail']" v-show="showCartDetail">
      <img src="../../../../assets/cart_detail.png">
      <span>购物车中还没有商品，赶紧选购吧！</span>
    </div>
  </div>
</template>

<script>
  import styles from './cart.scss'

  export default {
    name: "ShoppingCart",
    model: {},
    props: {},
    data() {
      return {
        styles,
        showCartDetail: false
      }
    },
    computed: {
      showHoverBorder: function () {
        return this.showCartDetail ?
          {'border-color': '#c81623',
            'border-bottom': '1px solid white'} : ''
      }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {}
  }
</script>

<style scoped>

</style>
